<!--
 * Description: 系统用户新增页面
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Dongxu.Ni
 * Date: 2020/03/22 02:53
-->

<template>
  <div>
    <!--数据表单-->
    <el-form label-width="80px" :model="formData" size="mini">
      <el-row>
        <el-col :span="24" style="padding: 0">
          <!--用户信息-->
          <el-form-item
            :label="$t('UserManager.userInfo')"
            style="background: #c9d2ca;text-align: right"
          />
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <!--登录名-->
          <el-form-item :label="$t('UserManager.loginName')">
            <el-input
              v-model="formData.loginName"
              clearable
              :placeholder="$t('input.placeholder')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!--密码-->
          <el-form-item :label="$t('UserManager.password')">
            <el-input
              v-model="formData.password"
              clearable
              :placeholder="$t('input.placeholder')"
              show-password
              type="password"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <!--用户名/真实姓名-->
          <el-form-item :label="$t('UserManager.userName')">
            <el-input
              v-model="formData.userName"
              clearable
              :placeholder="$t('input.placeholder')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!--别名/昵称-->
          <el-form-item :label="$t('UserManager.alias')">
            <el-input v-model="formData.alias" clearable :placeholder="$t('input.placeholder')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <!--性别-->
          <el-form-item :label="$t('UserManager.sex')">
            <el-select
              v-model="formData.sex"
              clearable
              :placeholder="$t('select.placeholder')"
              style="width: 100%;"
            >
              <el-option
                v-for="item in $store.getters['dict/dictOptions']('01')"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!--邮箱地址-->
          <el-form-item :label="$t('UserManager.email')">
            <el-input v-model="formData.email" clearable :placeholder="$t('input.placeholder')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <!--手机号码-->
          <el-form-item :label="$t('UserManager.mobile')">
            <el-input v-model="formData.mobile" clearable :placeholder="$t('input.placeholder')" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <!--电话号码-->
          <el-form-item :label="$t('UserManager.tel')">
            <el-input v-model="formData.tel" clearable :placeholder="$t('input.placeholder')" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <!--用户岗位-->
          <el-form-item :label="$t('UserManager.postId')">
            <el-select
              v-model="formData.postId"
              clearable
              :placeholder="$t('select.placeholder')"
              style="width: 100%"
            >
              <el-option
                v-for="item in postListOptions"
                :key="item.postId"
                :label="item.postName"
                :value="item.postId"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span style="display: block;text-align: center;margin-top: 5px">
      <!--取消按钮-->
      <el-button size="medium" @click="cancel">{{ $t('button.cancel') }}</el-button>
      <!--保存按钮-->
      <el-button :loading="isRequesting" size="medium" type="primary" @click="save">
        {{ $t('button.save') }}
      </el-button>
    </span>
  </div>
</template>

<script>
import { userAdd } from '../../../../api/sys/user'

export default {
  name: 'UserAdd',
  props: {},
  data() {
    return {
      // 正在查询
      isRequesting: false,
      formData: {}
    }
  },
  computed: {
    // 岗位列表
    postListOptions() {
      return this.$store.getters['post/getSubPostList']
    }
  },
  methods: {
    async save() {
      try {
        this.isRequesting = true
        await userAdd(this.formData, { msgSuccess: true, msgError: true })
        this.$emit('save')
      } catch (error) {
        console.log(error)
      } finally {
        this.isRequesting = false
      }
    },
    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>

<style scoped></style>
